<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>答题程序</title>
</head>
<style>
    body{
        background-color: rgb(99,159,245);
    }
    #map{
        width: 800px;
        height: 320px;
        margin: auto;
        /* background-color: antiquewhite; */
    }
    .banner{
        width: 800px;
        height: 300px;
        margin:auto;
        margin-top: 30px;
        background-color: rgb(99, 245, 245);
        border-radius: 20px;
        opacity: .4;
    }
    #button{
        width: 500px;
        height: 200px;
        /* background-color: aquamarine; */
        margin: auto;
        margin-top: 50px;
    }
    .inp-b{
        width: 100px;
        height: 30px;
        background-color: rgb(162, 228, 243);
       cursor: pointer;
       font-size: 20px;
       border-radius: 15px;
       font-family: "华文仿宋";
    border: 1px solid rgb(255, 255, 255)
    }
    .bu-n{
        width: 250px;
        height: 190px;
        margin: auto;
        /* background-color: bisque; */
    }
    .p{
        margin-top: 30px;
        font-family: "华文仿宋";
        font-size: 13px;
        position: relative;
        top: 20px;
    }
    .inp-a{
        width: 100px;
        height: 30px;
       
       cursor: pointer;
       font-size: 20px;
       border-radius: 15px;
       font-family: "华文仿宋";
    border: 1px solid rgb(88, 244, 255)
    }
    #bo{
        width: 100%;
       height: 30px;
    }
    #bo>.z{
        width: 1300px;
        height: 30px;
        position: relative;
    }
    .z>span{
        font-size: 14px;
        font-family: "华文仿宋";
        font-size: 26px;
        position: absolute;
       left: 700px;
       top: 10px;
    }
</style>
<body>
<div id="bo">
    <div class="z">
        <span>学生答题程序:</span>
    </div>
</div>
<div id="map">
    <div class="banner">
        <h1 style="margin-left:25px" class="p-n">正在随机筛选学生中.....</h1>
        <h1 style="margin-left:200px" class="p"></h1>
    </div>
</div>
<div id="button">
  <div class="bu-n">
     <input type="button" value="点击筛选" class="inp-b">
     <input type="button" value="返回" class="inp-a">
   </div>
</div>
    <script>
        var data=["孛子琛","叶雨欣","张科鑫","贾博琛","李嘉诚","刘江洋","王鑫","张少杰",
        "许俸禄","王浩冲","江勇","皇深奥","王瑞奇","王思凡","王成阳","张永强","陈伊曼",
         "高鹏飞","王东升","和瑞奇","杜佳博","董鑫","张俊睿","杨洋","董鸿安","王浩杰"
        ,"王玉娟","杨旭芳","王晋南","李秋楠","宿瑞","高国栋","李清华","李承建","景彦伽","孙成思"
        ,"郭浩","董字震","罗玉屏","荣淑艳","段起义","张继书","韩成伟","谷雨容","李震京","王建明"
        ,"古傲宇","魏文慧",]
        console.log(data);
        function randplay(min,max){
            return Math.floor(Math.random()*(max-min))+min
        }
        var p = document.querySelector('.p')
        var pn = document.querySelector('.p-n')
        var button = document.querySelector(".inp-b")
        var inpa = document.querySelector(".inp-a")
       
        var index;
        pn.style.display="none"
        
        button.onclick = function(){
            p.innerHTML=""
            index = randplay(0,49);
            pn.style.display ="block"
            time();
        }

        inpa.onclick =function(){
           location.replace(document.referrer); 

        }
        function time(){
          timer=setInterval(()=>{
            pn.style.display = "none"
            p.innerHTML="<h1>答题学生为:"+data[index]+"</h1>"
          },3000)
        }
        
    </script>
</body>
</html>